<template>
    <!-- 收货地址 -->
    <van-contact-card type="edit" :name="`${address.consignee} ${address.region_text} ${address.address}`" v-if="address" :tel="address.mobile" :editable="false" />
    
        <!-- 商品卡片 -->
    <van-form @submit="submit">
        <div v-for="(item,key) in product">
            <van-card
            :title="item.products.name"
            :thumb="item.products.thumb_text"
            num="2"
            >
            <template #title>
                <div class="title">{{ item.products.name }}</div>
            </template>
        
            <!-- 卡片的插槽部分 -->
            <template #desc v-if="item.attrs">
                <van-tag v-for="(item,index) in item.attrs" :key="index" class="tag" type="danger">{{ item.value }}</van-tag>
            </template>
            <template #desc v-else>
                <van-tag class="tag" type="danger">无规格数据</van-tag>
            </template>
        
            <template #tags>
                <div class="price">单价：￥{{item.products.price}}</div>
            </template>
        
            <template #price>
                <div class="price">合计：￥{{ item.total }}</div>
            </template>
            </van-card>
        
            <div>
                <van-field
                    v-model="remark[`${item.id}`]"
                    rows="2"
                    autosize
                    label="留言"
                    type="textarea"
                    maxlength="150"
                    placeholder="请输入评论内容"
                    show-word-limit
                    :rules="[{Required: true, message: '请输入评论内容'}]"
                    :readonly="orderid.status == '3'? true : false"

                />

                <van-field label="评分">
                    <template #input>
                        <van-rate v-model="rate[`${item.id}`]" :readonly="orderid.status == '3'? true : false"/>
                    </template>
                </van-field>

                <van-field name="thumbs" label="图片">
                    <template #input>
                        <van-uploader v-model="thumbs[`${item.id}`]" multiple :max-count="9" :readonly="orderid.status == '3'? true : false" :deletable="orderid.status == '3'? true : false"/>
                    </template>
                </van-field>
            </div>
            <van-divider></van-divider>
        </div>

        <!-- 操作按钮组 -->
        <div v-if="orderinfo.status == '3'" style="width:50%;margin:2em auto;">
                <van-button :loading="loading" round block color="linear-gradient(160deg, #005555 0%, #888888 100%)" native-type="submit">提交</van-button>
        </div>
    </van-form>
</template>
  
  <script setup>
  
  import { onMounted } from 'vue';
  
      const {proxy} = getCurrentInstance()
  
      //接收传过来的数据
      let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
      let product = ref({})
      let address = ref(null)
      let orderinfo = ref({})

      let loading = ref(false)
      let remark = ref([])
      let rate = ref([])
      let thumbs = ref([])

  
      onMounted(async () => {
          //监听后退事件
        //   window.addEventListener('popstate', Back)
          OrderInfo()
      })
  
    //   const Back = () =>
    //   {
    //       window.removeEventListener('popstate',Back)
    //       proxy.$router.push('/order')
    //   }
  
      //获取订单信息
      const OrderInfo = async () => {
          var params = {
              orderid,
              busid:proxy.$business.value.id,
          }
  
          var result = await proxy.$POST({
              url:'/order/info',
              params,
          })
  
          // console.log(result)
          // return false
          if(result.code==0)
          {
              proxy.$fail(result.msg)
              return false
          }
      
          address.value = result.data.address
          orderinfo.value = result.data.orderinfo
        //   console.log(result.data.product)
          //转化为对象 转化里面的attrs数据
          if(result.data.product)
          {
            result.data.product.map(item => {
                item.attrs = JSON.parse(item.attrs)

                if(orderid.status == '3')
                {
                    remark.value[`${item.id}`] = ''
                    rate.value[`${item.id}`] = 0
                    thumbs.value[`${item.id}`] = []
                }else
                {
                    var pic = []
                    item.thumbs_text.map(item => {
                        pic.push({url:item})
                    })
                    remark.value[`${item.id}`] = item.comment
                    rate.value[`${item.id}`] = parseInt(item.rate)
                    thumbs.value[`${item.id}`] = pic
                }
            })
          }
        //   console.log(thumbs.value)

          product.value = result.data.product
          // console.log(result.data.product)
      }

      const submit = async (values) => 
      {
        //console.log(values)
        // this.loading = true

        var list = []

        //处理数据
        for(var item of product.value)
        {
            var pic = []
            if(thumbs.value[`${item.id}`] && thumbs.value[`${item.id}`].length > 0)
            {
                thumbs.value[`${item.id}`].map(p => pic.push(p.file))
            }

            var value = {
                id:item.id,
                comment:remark.value[`${item.id}`],
                rate:rate.value[`${item.id}`],
                thumbs:pic
            }
            list.push(value)
        }
        // console.log(remark.value)
        // return false

        var success = 0
        var error = 0

        for(var params of list)
        {
            var result = await proxy.$UPLOAD({
                url:'/order/comment',
                params,
            })

            if(result.code == 0)
            {
                error++
            }else
            {
                success++
            }
        }

        // this.loading = false

        proxy.$success({
            message:`成功${success}条,失败${error}条`,
            onClose: () => proxy.$router.go(-1)
        })

    }
  </script>
  <style scoped>
  @import url('/assets/css/OrderInfo.css');
</style>